<script setup lang='ts'>
import {ref, reactive, PropType, onBeforeMount, watch} from 'vue'
import {FormRules, ElMessage} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import {PhysicalItemFormInfor, savePhysicalItemInfor} from '@/api/physicalExaminationManager/physicalItems'
import {DialogType, SeleteData} from '@/api/config'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import {NoChinese, NotLeadingAndTrailingSpaces} from '@/util/common'
import useStore from '@/store/common'
import {transfDicArrData} from '@/util/common'
//是否显示
const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  //弹窗类型
  dialogType:{
    type:String as PropType<DialogType>,
    required:true
  },
  //数据
  physicalItemData:{
    type:Object as PropType<PhysicalItemFormInfor>,
    required:true
  }
})

const {store} = useStore.setup()

const emits = defineEmits(['close'])

//字典数据列表 结果类型 检查类型 检验结果类型 单位 精度
const resultTypeList = ref<Array<SeleteData>>([])
const checkTypeList = ref<Array<SeleteData>>([])
const inspectResultTypeList = ref<Array<SeleteData>>([])
const unitList = ref<Array<SeleteData>>([])
const precisionList:Array<SeleteData> = [{label:'取整', value:'取整'}, {label:'小数点后一位', value:'小数点后一位'}, {label:'小数点后两位', value:'小数点后两位'}, {label:'小数点后三位', value:'小数点后三位'}, {label:'小数点后四位', value:'小数点后四位'}, {label:'小数点后五位', value:'小数点后五位'}]
// 弹窗标题定义
const title = ref('')

// 弹窗标题设置
const initTitle = () => {
  if (props.dialogType === 'add') {
    title.value = '新增项目'
  }
  else if (props.dialogType === 'edit') {
    title.value = '编辑项目'
  }
}

//信息
const fromData:PhysicalItemFormInfor = reactive(props.physicalItemData)

// 显示加载状态
const showSaveLoading = ref(false)

// 表单规则
const rules = reactive<FormRules>({
  itemCode:[
    {required:true, message: '请输入项目编码', trigger: ['change', 'blur']},
    {required:true, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']},
    {required:true, message:'应输入字母、数字、字符', pattern:NoChinese, trigger:['change', 'blur']},
    {required:true, message: '首尾不能为空格', pattern: NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ],
  itemName:[
    {required:true, message: '请输入项目名称', trigger: ['change', 'blur']},
    {required:true, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']},
    {required:true, message: '应输入汉字、字母、数字、字符,首尾不能为空格', pattern: NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ],
  checkType:[
    {required:true, message: '请选择检查类型', trigger: ['change', 'blur']}
  ],
  resultType:[
    {required:true, message: '请选择结果类型', trigger: ['change', 'blur']}
  ],
  inspectResultType:[
    {required:true, message: '请选择检验结果类型', trigger: ['change', 'blur']}
  ],
  enShortName:[
    {required:false, message: '请输入英文简称', trigger: ['change', 'blur']},
    {required:false, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']},
    {required:false, message:'应输入字母、数字、字符', pattern:NoChinese, trigger:['change', 'blur']},
    {required:false, message: '首尾不能为空格', pattern: NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ]
})

//表单项
const fromItems = ref<Array<FromItem>>([
  {label:'项目编码', placeholder:'请输入项目编码', prop:'itemCode', type:'input'},
  {label:'项目名称', placeholder:'请输入项目名称', prop:'itemName', type:'input'},
  {label:'英文简称', placeholder:'请输入英文简称', prop:'enShortName',  type: 'input'},
  {label:'检查类型', placeholder:'请选择检查类型', prop:'checkType', type:'selete', seleteData:checkTypeList.value, disabled:props.dialogType === 'edit'}
])

const fromItem = ref<Array<FromItem>>([...fromItems.value])
watch(fromData, (newValue) => {
  switch (newValue.checkType + '') {
  case '1':
    fromData.inspectResultType = ''
    fromItem.value = [...fromItems.value, {label:'结果类型', placeholder:'请选择结果类型', prop:'resultType', type:'selete', seleteData:resultTypeList.value}]
    switch (newValue.resultType + '') {
    case '1':
      fromItem.value = [...fromItems.value, {label:'结果类型', placeholder:'请选择结果类型', prop:'resultType', type:'selete', seleteData:resultTypeList.value}, {label:'单位', placeholder:'请选择单位', prop:'unit', type:'selete', seleteData:unitList.value}]
      break
    case '2':
      fromData.unit = ''
      break
    default:
    }
    break
  case '2':
    fromData.resultType = ''
    fromItem.value = [...fromItems.value, {label:'检验结果类型', placeholder:'请选择检验结果类型', prop:'inspectResultType', type:'selete', seleteData:inspectResultTypeList.value}]
    switch (newValue.inspectResultType + '') {
    case '1':
      fromItem.value = [...fromItems.value, {label:'检验结果类型', placeholder:'请选择检验结果类型', prop:'inspectResultType', type:'selete', seleteData:inspectResultTypeList.value}, {label:'单位', placeholder:'请选择单位', prop:'unit', type:'selete', seleteData:unitList.value}, {label:'显示精度', placeholder:'请选择显示精度', prop:'precision', type:'selete', seleteData:precisionList}]
      break
    case '2':
    case '3':
      fromData.precision = ''
      fromData.unit = ''
      break
    default:
    }
    break
  case '3':
    fromData.unit = ''
    fromData.precision = ''
    fromData.resultType = ''
    fromData.inspectResultType = ''
    fromItem.value = fromItems.value
    break
  default:
  }
}, {deep:true, immediate:true})
//表单清除控制
const resetFieldsFlag = ref(false)

const validateFlag = ref(false)

// 确认按钮
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}

//关闭
const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//取消按钮
const onCancel = () => {
  onClose()
}

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true
  savePhysicalItemInfor(fromData).then(() => {
    showSaveLoading.value = false
    ElMessage.success('保存成功！')
    emits('close')
  }).catch((error) => {
    showSaveLoading.value = false
    console.warn(error)
  })
}
//获取字典
const getDic = () => {
  store.getDicData('check_type').then((res) => {
    const list:Array<SeleteData> = transfDicArrData(res)
    list.forEach((item) => {
      checkTypeList.value.push(item)
    })
  })
  store.getDicData('result_type').then((res) => {
    const list:Array<SeleteData> = transfDicArrData(res)
    list.forEach((item) => {
      resultTypeList.value.push(item)
    })
  })
  store.getDicData('inspect_result_type').then((res) => {
    const list:Array<SeleteData> = transfDicArrData(res)
    list.forEach((item) => {
      inspectResultTypeList.value.push(item)
    })
  })
  store.getDicData('unit').then((res) => {
    const list:Array<SeleteData> = transfDicArrData(res)
    list.forEach((item) => {
      unitList.value.push(item)
    })
  })
}

onBeforeMount(() => {
  getDic()
  initTitle()
})

</script>

<template>
  <d-dialog
    :title="title"
    width="600px"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      label-position="right"
      :label-width="120"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :rules="rules"
      method="post"
      :form-data="fromData"
      :form-items="fromItem"
      :form-line-num="1"
      @submit="onSubmit"
    />
  </d-dialog>
</template>

<style scoped>
</style>